import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { Badge, DatePicker, Input } from 'antd';
import { isArray, isNil } from 'lodash';
import { observer } from 'mobx-react';

import RbProTable, { RbProTableStore } from '@components/RbProTable';
import { Content } from '@components/Page';
import { Status } from '@enumTypes/enumTypes';
import { getDictionaryListApi } from '@services/service';
import { TableAlignType } from '@/enumTypes/table';

const store = new RbProTableStore();

const JobInfo: FC = () => {
  // 字典数据
  const [jobExecutorTypeList, setJobExecutorTypeList] = useState<any[]>([]);

  /** 查询设置字典数据 */ ``;
  const handleQueryDictionaryList = useCallback(() => {
    getDictionaryListApi([
      'RB_STATUS',
      'RB_JOB_EXECUTOR_TYPE',
      'RB_JOB_MISFIR_POLICY',
      'RB_YES_NO'
    ]).then((res: any) => {
      if (isArray(res)) {
        const [jobExecutorTypeList = []] = res || [];
        setJobExecutorTypeList(jobExecutorTypeList);
      }
    });
  }, []);

  useEffect(() => {
    handleQueryDictionaryList();
  }, []);

  // 查询条配置列表
  const queryFromItems = useMemo(
    () => [
      {
        name: 'jobName',
        label: '任务名称',
        children: <Input />
      },
      // {
      //   name: 'jobGroup',
      //   label: '任务分组',
      //   children: <Input/>
      // },
      {
        name: 'startTime',
        label: '任务调度时间',
        children: <DatePicker.RangePicker />
      },
      {
        name: 'endTime',
        label: '任务结束时间',
        children: <DatePicker.RangePicker />
      }
    ],
    []
  );

  // 表格列配置
  const columns = useMemo(
    () => [
      {
        title: '任务名称',
        dataIndex: 'jobName',
        align: TableAlignType.center,
        width: 140
      },
      // {
      //   title: '任务分组',
      //   dataIndex: 'jobGroup',
      //   align: TableAlignType.center,
      //   width: 120
      // },
      {
        title: '执行状态',
        dataIndex: 'status',
        align: TableAlignType.center,
        render: (value: any) => {
          return (
            !isNil(value) && (
              <>
                <Badge status={Status.enable === value ? 'success' : 'error'} />
                {value === 1 ? '成功' : value === 0 ? '失败' : ''}
              </>
            )
          );
        },
        width: 100
      },
      {
        title: '任务调度时间',
        dataIndex: 'startTime',
        align: TableAlignType.center,
        width: 210
      },
      {
        title: '任务结束时间',
        dataIndex: 'endTime',
        align: TableAlignType.center,
        width: 210
      },
      {
        title: '任务执行方法',
        dataIndex: 'executorHandler',
        align: TableAlignType.center,
        width: 120
      },
      {
        title: '任务信息',
        dataIndex: 'jobMessage',
        align: TableAlignType.center,
        width: 120
      },
      {
        title: '任务参数',
        dataIndex: 'executorParams',
        align: TableAlignType.center,
        width: 300
      },
      {
        title: '异常信息',
        dataIndex: 'exceptionInfo',
        align: TableAlignType.center,
        width: 250
      }
    ],
    [jobExecutorTypeList]
  );

  return (
    <Content>
      <RbProTable
        rowKey="id"
        columns={columns}
        store={store}
        sticky
        actionUrl="/job/log"
        queryConfig={{
          queryFromItems,
          queryFormat: true
        }}
        toolBarRender={() => []}
      />
    </Content>
  );
};

export default observer(JobInfo);
